<template lang="">
    <div>
        <button @click="submit()" v-hasToken>提交</button>
        您选择的答案是
        <br>
        单选题{{single}}
        <br>
        多选题{{mul}}
        <ul>
            <li>一、单选题</li>
            <li v-for="(item, index) in singleQusList" :key="id">
                <div>{{index+1}}. {{item.title}}</div>
                <ul>
                    <li v-for="(select, i) in item.selectOptions" :key="index">
                        {{select.num}}. <input type="radio" :value="select.num" v-model="item.ans">
                        <span>{{select.title}}</span>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>二、多选题</li>
            <li v-for="(item, index) in mulQussList" :key="id">
                <div>{{index+1}}. {{item.title}}</div>
                <ul>
                    <li v-for="(select, i) in item.selectOptions" :key="index">
                        {{select.num}}. <input type="checkbox" :value="select.num" v-model="item.ans">
                        <span>{{select.title}}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script>
localStorage.setItem("token", "123456");
export default {
    data() {
        return {
            single: "",
            mul: "",
            singleQusList: [
                {
                    id: 1,
                    title: "1+1等于几",
                    selectOptions: [
                        { title: "1", num: "A" },
                        { title: "2", num: "B" },
                        { title: "11", num: "C" },
                        { title: "12", num: "D" },
                    ],
                    ans: [],
                },
                {
                    id: 2,
                    title: "12345679*8等于几",
                    selectOptions: [
                        { title: "98765432", num: "A" },
                        { title: "1234567", num: "B" },
                        { title: "21312312", num: "C" },
                        { title: "234234234", num: "D" },
                    ],
                    ans: [],
                },
            ],
            mulQussList: [
                {
                    id: 3,
                    title: "1+1等于几",
                    selectOptions: [
                        { title: "1", num: "A" },
                        { title: "2", num: "B" },
                        { title: "11", num: "C" },
                        { title: "12", num: "D" },
                    ],
                    ans: [],
                },
                {
                    id: 4,
                    title: "12345679*8等于几",
                    selectOptions: [
                        { title: "98765432", num: "A" },
                        { title: "1234567", num: "B" },
                        { title: "21312312", num: "C" },
                        { title: "234234234", num: "D" },
                    ],
                    ans: [],
                },
            ],
        }
    },
    methods: {
        submit() {
            let arr1 = this.singleQusList.map((item, index) => {
                if (item.ans.length == 0) {
                    return (index + 1) + "、 请选择答案"
                }
                return (index + 1) + "、" + item.ans + "    "
            })
            this.single = arr1.join("")
            let arr2 = this.mulQussList.map((item, index) => {
                if (item.ans.length == 0) {
                    return (index + 1) + "、 请选择答案"
                }
                return (index + 1) + "、" + item.ans + " "
            })
            this.mul = arr2.join("")
        }
    },
}
</script>
<style>
li {
    list-style: none;
}
</style>